<template>
  <div id="app">
    <div class="main_container" v-if="!show_setting">
      <!-- 顶部用户数据显示栏 -->
      <div class="user_message">
        <div class="zhezhao"></div>
          <!-- 用户数据的容器 -->
          <div class="user_container">
            <!-- 左侧头像部分 -->
              <div> 
                <div class="img_container">
                    <img :src="user_info.avator" alt="">
                </div>  
              </div>
            <!-- 右侧信息部分 -->
              <div>
                <div>
                  <p  v-if="isLogin" :class="{current1:isLogin}">{{user_info.u_name||'游客4396'}}</p>
                  <p v-else class="username"> <router-link to="/login">登录</router-link> <span>  |</span> <router-link to="/register">注册</router-link></p>
                  <p ><van-icon name="location-o" color="#fff" /> <span>{{user_info.u_address||'中国大陆'}}</span> </p>
                  <p class="fans"><span>粉丝 : </span><span> {{user_info.fans||0}}</span>    |   <span>关注 : </span><span> {{user_info.sub||0}} </span></p>
                </div>                  
              </div>
          </div>
          
      </div>
      <!-- 为了设置顶部背景 -->
      <!-- 左上角设置和分享图标 -->
      <div class="shareAndSet">
        <van-icon name="share-o" color="#f4f4f4" size="20px" @click="showShare = true"   style="margin-right:10px" /> <van-icon name="setting-o" @click="show_setting=true" style="margin-right:10px"  color="#f4f4f4" size="20px"/> 
      </div>
      <!-- 中间菜单栏 -->
      <div class="menulist">   
          <van-tabs v-model="isselect" background="#f4f4f4" line-width="60px" title-active-color="#EE2928" title-inactive-color="#666">
            <van-tab v-for="(item,index) in menulist" :key="index">
              <template #title> 
                <van-icon size="14px"/>
                {{item.title}}
                </template>
              <div v-show="index==0" class="body_container">
                <div v-if="user_info.u_name">
                  <div class="collect_item" v-for="item in collectList" :key="item.c_id">
                    <router-link :to="`/detail/${item.rec_id}`">
                    <van-image
                      width="100"
                      height="100"
                       fit="cover"
                      :src="item.picurl" 
                    />
                    <!-- <img :src="item.picurl" alt=""> -->
                    </router-link>
                    <router-link :to="`/detail/${item.rec_id}`">
                    <div>
                      <p>{{item.rec_name}}</p>
                      <p>{{item.rec_dec}}</p>
                      <p class="icon_control"><van-icon name="good-job-o" /><span>{{10}}</span><van-icon name="star-o" /><span>{{12}}</span> </p>
                    </div>
                    </router-link>
                  </div>
                </div>
                <div v-else style="padding-top:50px;color:#666;text-align:center;">
                  请先<router-link to="/login">登录</router-link> 
                </div>
              </div>
              <div v-show="index==1">
                <div class="body_container" v-if="user_info.u_name">
                  <div class="collect_item" v-for="item in contentList" :key="item.c_id">
                    <router-link :to="`/detail/${item.rec_id}`">
                    <img :src="item.rpic" alt="">
                    </router-link>
                    <router-link :to="`/detail/${item.rec_id}`">
                    <div>
                      <p>{{item.time |timeformate}}</p>
                      <p>{{item.txt}}</p>
                      <p class="icon_control"><van-icon name="good-job" @click="isaddLike(item.id)" /><span>{{item.like_num}}</span> </p>
                    </div>
                    </router-link>
                  </div>
                </div>
                <div v-else style="padding-top:50px;color:#666;text-align:center;">
                  请先<router-link to="/login">登录</router-link> 
                </div>
              </div>
            </van-tab>
          </van-tabs>
    
      </div>
      <!-- 下方内容区域显示 -->

    </div>
    <van-tabbar  v-model="active" active-color="#ee0a24" inactive-color="#666">
      <van-tabbar-item name="home" icon="home-o">菜谱</van-tabbar-item>
      <van-tabbar-item name="search" icon="search">集市</van-tabbar-item>
      <van-tabbar-item name="bag" icon="bag-o">订单</van-tabbar-item>
      <van-tabbar-item name="friends" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
      />
      <div v-if="show_setting">
        <div class="settint_header">
          <van-icon name="arrow-left" @click="show_setting= false" size="20px" color="#666"/>
        </div>
        <van-cell title="账号管理" is-link />
        <van-cell title="用户协议" is-link/>
        <van-cell>
          <van-button @click="DialogMessage"  type="primary" color="#ED706C" block> 退出登录</van-button>
        </van-cell>
      </div>
  </div>
</template>

<script>


export default {
  data(){
    return{
      showShare: false,
      show_setting:false,
      userinfo:'',
      user_info:{},
      collectList:[],
      contentList:[],
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
      active:"home",
      isLogin:false,
      isselect:0,
      menulist:[
        {title:'收藏'},
        {title:'评论'}
      ]
    }
  },
  methods: {
    loginout(){
      localStorage.removeItem('userinfo')
      this.isLogin =false
      this.$router.go(0)
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    DialogMessage(){
      localStorage.removeItem('userinfo')
      this.$router.go(0)
      this.show_setting = false
    },
    checkIsLogin(){
      if(localStorage.getItem('userinfo')){
        this.isLogin = true
        this.userinfo = JSON.parse(localStorage.getItem('userinfo')) 
        // console.log(this.userinfo.uphone);
        this.$axios.get('/users/usermessage?u_phone='+this.userinfo.uphone).then(res=>{
          this.user_info = res.data.result
          if(res.data.code==200){
            this.$axios.get('/users/collectlist?u_id='+this.user_info.u_id).then(res=>{
              this.collectList = res.data.result
              if(res.data.code==200){
                this.$axios.get(`/users/content?uid=${this.user_info.u_id}`).then(res=>{
                  this.contentList = res.data.result
                  console.log(res.data.result);
                })
              }
            })
          }
        })
      }
    },
    isaddLike(id){
      // alert(id)
      this.$axios.get('/users/addcontentcount?id='+id).then(res=>{
        if(res.data.code==200){
          this.$axios.get(`/users/content?uid=${this.user_info.u_id}`).then(res=>{
             this.contentList = res.data.result1
             console.log(res.data.result1);
           })   
        }
      })
    }
  },
  filters:{
    timeformate(value){
      let time = new Date(value)
      let y = time.getFullYear()
      let m = time.getMonth()+1
      let d = time.getDate()
      return `${y}-${m}-${d}`
    }
  },
  mounted(){
    this.checkIsLogin()
  }
}
</script>
<style>
.van-dialog {
  width: 50vw;
  height: 25vh;
}

.van-share-sheet__options{
     justify-content: space-evenly;
   }
</style>
<style lang="scss" scoped>
#app{
   .shareAndSet{
      width: 100vw;
      height: 3.125rem;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      padding-right: 1.25rem;
      justify-content: right;
    }
    .settint_header{
      width: 100vw;
      display: flex;
      align-items: center;
      padding-left: .625rem;
      height: 3.125rem;
    }
  .main_container{
    box-sizing: border-box;
    padding-bottom: 3.125rem;
    // height: 7.5rem;
    // 用户信息模块
    .current1{
      font-size: .9375rem;
      color: #dbc3ab;
    }
    .current{
      border-bottom: 2px solid #ee0a24;
    }
    .user_message{
      width: 100%;
      height: 60vw;
      position: sticky;
      top: 0;
      background: url('/img/VCG41184626795.jpg');
      // background: linear-gradient(to right,#aa4b6b,#6b6b83,#3b8d99);
      display: flex;
      align-items: center;
      justify-content: center;
      .zhezhao{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba($color: #000, $alpha: 0.3);
        // opacity: 0.5;
      }
      .user_container{
        width: 75%;
        height: 58%;
        display: flex;
        z-index: 100;
        a{
          margin-left: .3125rem;
          color: #fff;
        }
        // border: 1px solid #fff;
        >div:first-child{
          width: 40%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          // 图片容器的大小
          .img_container{
            width:65%;
            height: 55%;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid #fff;
            img{
              width: 100%;
            }
          }
        }
        >div:last-child{
          width: 60%;
          height: 100%;
          display: flex;
          align-items: center;
          p{
            color: #f4f4f4;
            font-size: .875rem;
            margin-top: 1rem;
          }
          .fans{
            width: 10rem;
            display: flex;
            position: relative;
            top: -10px;
            left: -8px;
            justify-content: space-evenly;
            align-items: center;
            height: 2.1875rem;
          }
        }
      }
    }
    // 内容区域模块
    .body_container{
      width: 100vw;
      height: 55vh;
      overflow: scroll;
    }
    .collect_item{
      margin-top: .5rem;
      width: 100vw;
      display: flex;
      box-sizing: border-box;
      padding: .625rem 1.25rem;
      border-bottom: 1px solid #f4f4f4;
      img{
        width: 25vw;
        height: 25vw;
        border-radius: .3125rem;
      }
      div{
        margin-left: .9375rem;
        >p{
          margin-top: .6rem;
          color: #666;
        }
        .icon_control{
          margin-top: 1.25rem;
          font-size: 1.2rem;
          span{
            font-size: .875rem;
            margin-right: .3125rem;
          }
        }
      }
    }
  }
}
  
</style>
